<style>
    #febs-video xm-select {
        min-height: 30px;
        line-height: 30px;
    }

</style>

<div class="layui-fluid layui-anim febs-anim" id="febs-video" lay-title="添加商品">
    <div class="layui-row layui-col-space8 febs-container">
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card" style="margin: 0 auto;">
                <div class="layui-card-header">添加宣教视频</div>
                <div class="layui-card-body user-profile-card">

                    <form class="layui-form" action="" lay-filter="product-add">

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">科室：</label>
                                <div class="layui-input-inline">
                                    <select name="deptId" lay-filter="deptId" id="deptId">
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">标题：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="videoTitle" id="videoTitle" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-row">
                                <div class="layui-upload" style="display: inline-block">
                                    <button type="button" class="layui-btn" id="uploadImage">视频缩略图</button>
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" style="width: 100px;height: 100px;" id="imageUrl">
                                    </div>
                                </div>

                                <div class="layui-upload layui-row" style="display: inline-block">
                                    <button type="button" class="layui-btn" id="uploadVideo">上传视频</button>
                                    <div class="layui-upload-list" style="width: 500px;height: 100px;">
                                        <div class="layui-progress layui-progress-big"  lay-showpercent="yes"
                                             lay-filter="demo">
                                            <div class="layui-progress-bar" lay-percent=""></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit
                                    lay-filter="videot-add-submit" id="submit">
                                <i style="display: none; margin-left: 30px"
                                   class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                                开始上传
                            </button>


                        </div>
                    </form>

                    <table lay-filter="deptVideoTable" lay-data="{id: 'deptVideoTable'}"></table>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="user-option">
    <!--    <a lay-event="detail">-->
    <!--        <i class="layui-icon febs-edit-area febs-green">&#xe7a5;</i></a>-->
<!--    <a lay-event="edit"><i-->
<!--            class="layui-icon febs-edit-area febs-blue">&#xe7a4;</i></a>-->
    <a lay-event="del"><i class="layui-icon febs-edit-area febs-red">&#xe7f9;</i></a>
</script>

<script data-th-inline="none" type="text/javascript">
    layui.use(['upload', 'jquery', 'febs', 'form', 'element', 'table'], function () {
        let $ = layui.jquery,
            febs = layui.febs,
            table = layui.table,
            form = layui.form,
            $view = $('#febs-video'),
            upload = layui.upload,
            element = layui.element,
            tableIns,
            deptId,
            deptName,
            imageUrl,
            videoUrl
        form.render();

        initDeptVideoTable();
        febs.post(ctx + 'web/get/deptlist', null, function (data) {
            $("#deptId").empty();
            $("#deptId").append(new Option("请选择科室", ""));
            $.each(data.data, function (index, item) {
                $("#deptId").append(new Option(item.dept_NAME, item.id));
            });
            layui.form.render("select");
        });

        form.on('select(deptId)', function (data) {
            deptId = new Number(data.value)
            deptName = this.innerText
            console.log(deptId)
        });

        form.on('submit(videot-add-submit)', function (data) {
            if (!data.field.deptId) {
                febs.alert.warn('请选择科室');
                return false;
            }
            if (!data.field.videoTitle) {
                febs.alert.warn('请输入标题');
                return false;
            }
            if (!imageUrl) {
                febs.alert.warn('请上传图片');
                return false;
            }
            if (!videoUrl) {
                febs.alert.warn('请上传视频');
                return false;
            }
            febs.post(ctx + 'web/add/deptvideo', {
                deptid: deptId,
                deptName: deptName,
                videoTitle: data.field.videoTitle,
                videoImageUrl: imageUrl,
                videoUrl: videoUrl
            }, function (data) {
                layer.closeAll();
                window.location.reload();
            });

            return false;

        });
        //图片上传
        upload.render({
            elem: '#uploadImage'
            , url: ctx + 'upload/image'
            , accept: 'images'
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#imageUrl').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                $("#uploadImage").text("图片上传成功");
                imageUrl = res.data.url
                console.log(res)
            }
            , error: function () {
                $("#uploadImage").text("图片上传失败");
            }
        });
        //视频上传
        upload.render({
            elem: '#uploadVideo'
            , url: ctx + 'upload/video'
            , accept: 'video'
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    //$('#imageUrl').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                layer.msg('视频上传成功', {icon: 1});
                $("#uploadVideo").text("视频上传成功");
                videoUrl = res.data.url
                console.log(res)
            }
            , error: function () {
                $("#uploadVideo").text("视频上传失败");
            }
            //进度条
            , progress: function (n, index, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {


                }
            }
        });


        function initDeptVideoTable() {
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'deptVideoTable',
                url: ctx + 'web/get/deptvideolist',
                method: 'post',
                page: false,
                totalRow: true,
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": "", //解析提示文本
                        data: res.data //解析数据列表
                    };
                },
                cols: [[
                    {field: 'id', title: 'id'},
                    {field: 'deptId', title: '科室Id'},
                    {field: 'deptName', title: '科室名称'},
                    {field: 'videoTitle', title: '视频标题'},
                    {field: 'videoUrl', title: '视频播放地址'},
                    {
                        field: 'videoImageUrl', title: '视频缩略图', align: 'center',
                        templet: function (d) {
                            return '<div οnclick="photograph(this)"><img style="max-width: 100%;" src=' + d.videoImageUrl + '></div>'
                        }
                    },
                    {title: '操作', toolbar: '#user-option', width: 120}
                ]]
            });
        }

        table.on('tool(deptVideoTable)', function (obj) {
            let data = obj.data,
                layEvent = obj.event;
            console.log(data)
            if (layEvent === 'del') {
                febs.modal.confirm('删除视频', '确定删除该视频？', function () {
                    febs.post(ctx + 'web/delete/deptvideo', {id: data.id}, function () {
                        febs.alert.success('删除视频成功');
                        layer.closeAll();
                        window.location.reload();
                    });
                });
            }
            if (layEvent === 'edit') {

                febs.modal.open('修改商品', 'product/editproduct/' + data.id, {
                    area: $(window).width() <= 750 ? '90%' : '50%',
                    btn: ['提交', '取消'],
                    yes: function (index, layero) {
                        $('#product-update').find('#submit').trigger('click');
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                });
            }
        });
    })


</script>